<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工业务统计</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin: 10px">
      <el-input style="width: 200px" placeholder="年" suffix-icon="el-icon-search"></el-input>
      <el-input style="width: 200px;margin-left: 8px" placeholder="月" suffix-icon="el-icon-search" ></el-input>
      <el-button type="primary" style="margin-left: 8px" > <i class="el-icon-search" style="margin-right: 5px"> </i>搜索 </el-button>
      <el-button type="primary" style="margin-left: 8px" >图表展示</el-button>
      <i class="el-icon-s-data" style="margin-left: 500px"></i>
      <i class="el-icon-s-claim" style="margin-left: 10px"></i>
      <i class="el-icon-s-check" style="margin-left: 10px"></i>
      <i class="el-icon-menu" style="margin-left: 10px"></i>
    </div>
    <el-table :data="tableData" border stripe >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column type="index" width="60" label="序号" align="center" >
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="部门" width="120" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="职位" width="150" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="单据分发数" width="120" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="货运单接单数" width="130" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="承运数" width="120" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="司机" width="120" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="投诉成功处理" width="130" align="center" sortable>
      </el-table-column>
      <el-table-column prop="money" label="回告信息数" align="center" sortable>
      </el-table-column>

    </el-table>
    <div style="padding: 10px">
      <el-pagination

          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
      money:100.00
    };
    return {
      tableData: Array(9).fill(item),
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sideWidth:200,
      isShow:true,

    }
  },
  methods:{
    collapse(){
      this.isCollapse = !this.isCollapse
      if (this.isCollapse){
        this.sideWidth = 64,
            this.collapseBtnClass='el-icon-s-unfold'
        this.isShow=false
      }else{
        this.sideWidth = 200
        this.collapseBtnClass='el-icon-s-fold'
        this.isShow=true
      }
    },

  }
};
</script>

<style >

</style>

 
 